<template>
    <div class="v-input">
        <el-input v-model="inputValue" :placeholder="placeholder"
                  :style="{ width: `${width}px`, height: `${height}px` }"
                  :disabled="disabled" :clearable="clearable" :type="type" @change="change" @blur="blur" @focus="focus"
                  :class="{ 'v-input-prefix': isPrefix, 'v-input-suffix': isSuffix }">
            <div slot="prefix" ref="prefix">
                <slot name="prefix"></slot>
            </div>
            <div slot="suffix" ref="suffix">
                <slot name="suffix"></slot>
            </div>
        </el-input>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'v-input',
        props: {
            // 提示语
            placeholder: {
                type: String,
                default: '请输入内容'
            },
            // 值
            value: {},
            // 宽度
            width: {
                type: Number,
                default: 300
            },
            // 高度
            height: {
                type: Number,
                default: 30
            },
            // 禁用
            disabled: {
                type: Boolean,
                default: false
            },
            // 清空
            clearable: {
                type: Boolean,
                default: false
            },
            // 类型
            type: {
                type: String,
                default: 'text'
            }
        },
        data () {
            return {
                inputValue: '',
                isPrefix: false,
                isSuffix: false
            }
        },
        watch: {
            inputValue (val) {
                this.$emit('on-watch', val)
            }
        },
        methods: {
            change (val) {
                this.$emit('on-change', val)
            },
            blur (val) {
                this.$emit('on-blur', val)
            },
            focus (val) {
                this.$emit('on-focus', val)
            }
        },
        mounted () {
            this.inputValue = this.value
            if (this.$refs.prefix.innerHTML) {
                this.isPrefix = true
            }
            if (this.$refs.suffix.innerHTML) {
                this.isSuffix = true
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .v-input
        font-size 12px
        .v-input-prefix
            .el-input__inner
                padding-left 30px
        .v-input-suffix
            .el-input__inner
                padding-right 30px
        .el-input__inner
            padding 0 15px
            height 100%
        .el-input__prefix, .el-input__suffix
            div
                height 100%
                position relative
                i
                    position absolute
                    top 50%
                    margin-top -13px
        .el-input__suffix div i
            right 0
        input:-webkit-autofill
            font-size 12px
            background-color #FAFFBD
            background-image none
            color #000
            -webkit-box-shadow 0 0 0 1000px #fff inset
</style>
